<template>
  <data-table-app-page>
    <div slot="toolbar">
      <el-form inline :model="searchForm">

          <el-form-item label="姓名">
            <el-input v-model="searchForm.realName" clearable style="width: 200px"></el-input>
          </el-form-item>
          <el-form-item label="角色">
            <type-select
              v-model="searchForm.roleId"
              :items="roles"
              valueField="id"
              textField="roleName"
              style="width: 160px"
            />
          </el-form-item>
          <el-form-item label="用户名">
            <el-input v-model="searchForm.username" clearable style="width: 140px"></el-input>
          </el-form-item>
          <el-form-item label="启用">
            <type-select
              v-model="searchForm.status"
              :items="DictMan.items('enable')"
              style="width: 140px"
            />
          </el-form-item>
          <el-form-item>
            <data-table-query-button :query-params="searchForm" />
          </el-form-item>
        </el-form>
        <el-button
          v-auth:add
          type="primary"
          icon="el-icon-plus"
          @click="onAddClick"
        >
          增加
        </el-button>
    </div>
    <data-table
      ref="table"
      url="/api/admin/listAdmin"
    >
      <el-table-column prop="realName" label="姓名" width="140" show-overflow-tooltip></el-table-column>
      <el-table-column prop="roleNames" label="角色" width="120" show-overflow-tooltip></el-table-column>
      <el-table-column prop="username" label="用户名" width="140" show-overflow-tooltip></el-table-column>
      <el-table-column prop="phone" label="手机号码" width="110"></el-table-column>
      <el-table-column prop="email" label="邮箱地址" width="174" show-overflow-tooltip></el-table-column>
      <el-table-column prop="orgNames" label="组织/社区" width="140" show-overflow-tooltip></el-table-column>
      <el-table-column prop="createTime" label="创建时间" width="152"></el-table-column>
      <el-table-column prop="status" label="启用" width="62" v-slot="{row}" fixed="right">
        <enable-status v-model="row.status" :admin="row" :readonly="!$auth('status')" />
      </el-table-column>
      <el-table-column v-if="$auth(['update', 'update-password', 'relate-orgs'])" v-slot="{row}" label="操作" min-width="266" fixed="right">
        <el-button
          v-auth:update
          type="text"
          size="medium"
          @click="onUpdateClick(row)"
        >
          修改
        </el-button>
        <el-button
          v-auth:update-password
          type="text"
          size="medium"
          @click="onUpdatePasswordClick(row)"
        >
          修改密码
        </el-button>
        <el-button
          v-if="row.roleId != 1"
          v-auth:relate-orgs
          type="text"
          size="medium"
          @click="onRelateOrgsClick(row)"
        >
          关联组织
        </el-button>
        <el-button
          v-if="row.roleId == 14"
          type="text"
          size="medium"
          @click="onManageMerchantClick(row)"
        >
          管理商家
        </el-button>
      </el-table-column>
    </data-table>

    <edit-dialog ref="editDialog" />
    <password-update-dialog ref="passwordUpdateDialog" />
    <relate-orgs-dialog ref="relateOrgsDialog" />
  </data-table-app-page>
</template>
  
<script>
import EnableStatus from './EnableStatus';
import EditDialog from './EditDialog';
import PasswordUpdateDialog from './PasswordUpdateDialog';
import RelateOrgsDialog from './RelateOrgsDialog';

export default {
  pageProps: {
    title: '系统用户管理'
  },
  components: {
    EnableStatus,
    EditDialog,
    PasswordUpdateDialog,
    RelateOrgsDialog
  },
  data() {
    return {
      searchForm: {},
      roles: [],
      permission: '/system/admin'
    }
  },
  mounted() {
    this.$http.get('/api/role/page', {params: {rows: 100}}).then((page) => {
      this.roles = page.rows;
    });
  },
  methods: {
    onAddClick() {
      this.$refs.editDialog.open();
    },
    onUpdateClick(admin) {
      this.$refs.editDialog.open(admin);
    },
    onUpdatePasswordClick(admin) {
      this.$refs.passwordUpdateDialog.open(admin);
    },
    onRelateOrgsClick(admin) {
      this.$refs.relateOrgsDialog.open(admin);
    },
    onManageMerchantClick(admin) {
      top.app.pushPage({
        key: admin.id,
        path: '/admin/merchant-manage',
        params: {admin},
        subTitle: admin.realName
		  });
    },
  }
}
</script>